Guidelines · Navigation

Account menu control

One control opens the account menu on every RoomPlans surface: an avatar with a chevron, no plate and no border. Desktop opens a dropdown anchored to the avatar; mobile opens a bottom sheet. Click anything on this page — every specimen is live.

Trigger · avatar + chevron Open state · ink ring + 180° flip Motion · 160ms colour / 240ms transform

01 · Anatomy

The trigger

Two marks, 6px apart, on no background. The avatar carries the initial in flame on a warm tint; the chevron matches the header glyphs' stroke and size so the cluster reads as one type family.

Rest

Avatar 30–32px · chevron 15–16px · gap 6px · no border, no fill behind

Hover

A sunken-tint wash appears behind both marks. Desktop only — mobile has no hover state.

Open

2px ink ring on the avatar, chevron flipped 180°. Both states persist while the menu is open.

02 · Desktop

Dropdown

250px panel, right-aligned to the trigger, 8px below it. Click the avatar to open, then any row to select — the row washes and the selection is echoed beneath.

ROOMPLANS.AI What are you looking for?

For Homeowner

LC Lee

Language

Right-align the panel to the trigger, 8px clear of it. Group with hairlines: account · destinations · role switch and log out. Mark unread with a 7px flame dot; mark the current choice with a flame tick. Keep rows 40–44px and full-bleed on hover.

Don't

Don't put a border or a filled pill around the trigger. Don't use flame for row text, icons or hover — flame marks status only. Don't exceed one accent per row, or add a second chevron inside the panel. Don't centre the panel or let it overhang the viewport edge.

03 · Mobile

Bottom sheet

Same trigger, different surface. The sheet rises over a scrim with a grab handle and 46px rows — thumb-reachable, and it never duplicates the destinations the tab bar already carries.

9:41 LTE · 82%

ROOMPLANS.AI

What are you looking for?

Project Briefs

Review proposals and keep your briefs up to date

L LC Lee For Homeowner

Language

Why a sheet, not a dropdown

A 250px panel pinned to a top-right avatar is out of thumb reach on a 390pt screen; the sheet puts every row in the lower half. The sheet carries only what the tab bar cannot — account, language, support, role switch, log out. My Projects, Explore, Add Project and Messages stay in the tabs. The Settings tab and the avatar open the same sheet, so there is one destination and two ways in. Dismiss on scrim, handle, ✕ or a row tap. Confirmations appear above the sheet, never inside it.

Selecting a language

1. The language row shows the current locale as its label — never the word "Language" — with a right chevron marking it as a submenu. 2. Tapping it replaces the menu body in place: a back row titled "Language", then the locale list. The panel does not stack a second floating layer. 3. No tick in the list: each locale is written in its own language, and the menu row already shows the active one. 4. Picking one applies immediately, returns to the main menu and updates the row label. The back arrow leaves the locale unchanged.

Spec

Panel width 250px desktop · full width mobile Row height 40px · 46px Radius card · frame top corners Elevation shadow-float, no border Scrim rgba(20,14,10,.5) mobile only